<template>
    <div class="tc-center fl">
        <!-- <rx-center-title-swiper :data="title">

        </rx-center-title-swiper> -->
        <div style="width:458px">
            <ul class="clearfix uiTab9 j_uiTab9">
                <li :class="{'uiTab9-active':subIndex == index, 'cGreen': index === 2}" @click="subSwitch(index)" v-for="(item, index) of title" :key="index">{{item}}</li>
            </ul>
        </div>
        <div id="j-tc-center-content">
            <!-- 状态 state -->
            <!-- ['状态', '阶', '', '结果', '过程', '管理', '资金', '人事', '积分', '成就'] -->
            <!-- title: ['状态', '阶', '', '结果', '过程', '管理', '人事'6, '资金', '成就', '积分'], -->

            <div class="uiTab8Con" v-if="subIndex == 0">
                <rx-state></rx-state>
            </div>
            <!-- 结果 result -->
            <div class="uiTab8Con" v-if="subIndex == 3">
                <rx-result></rx-result>
            </div>
            <!-- 过程 process -->
            <div class="uiTab8Con" v-if="subIndex == 4">
                <rx-process></rx-process>
            </div>
            <!-- 管理 administration -->
            <div class="uiTab8Con" v-if="subIndex == 5">
                <rx-administration></rx-administration>
            </div>
            <!-- 阶 administration -->
            <div class="uiTab8Con" v-if="subIndex == 1">
                <rx-levelDetail></rx-levelDetail>
            </div>
            <!-- 级别 administration -->
            <div class="uiTab8Con" v-if="subIndex == 2">
                <rx-level></rx-level>
            </div>
            <!-- 人事 personnel -->
            <div class="uiTab8Con" v-if="subIndex == 6">
                <rx-personnel></rx-personnel>
            </div>
            <!-- 资金 capital -->
            <div class="uiTab8Con" v-if="subIndex ==  7">
                <rx-capital></rx-capital>
            </div>
            <!-- 积分 integral -->
            <div class="uiTab8Con" v-if="subIndex == 9">
                <rx-newIntegral></rx-newIntegral>
            </div>
            <!-- 成就 achievement -->
            <div class="uiTab8Con" v-if="subIndex == 8">
                <rx-achievement></rx-achievement>
            </div>
            <!-- 积分 integral -->
            <!-- <div class="uiTab8Con" v-if="subIndex ==10">
                <rx-newIntegral></rx-newIntegral>
            </div> -->

        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
// 注: 所有的大组件已 rx-xxx 命名, 不要使用此示例文件命名，可保留作为参考
import rxState from './state'
import rxResult from './result'
import rxProcess from './process'
import rxLevel from './level'
import rxLevelDetail from './levelDetail'
import rxAdministration from './administration'
import rxPersonnel from './personnel'
import rxCapital from './capital'
import rxIntegral from './integral'
import rxAchievement from './achievement'
import rxNewIntegral from './newIntegral'


export default {
    components: {
        rxState,
        rxResult,
        rxProcess,
        rxLevel,
        rxLevelDetail,
        rxAdministration,
        rxPersonnel,
        rxCapital,
        rxIntegral,
        rxAchievement,
        rxNewIntegral

    },
    data () {
        return {
            level: 0,
            title: ['状态', '阶', '', '结果', '过程', '管理', '人事', '资金', '成就', '积分'],
            subIndex: 1
        }
    },
    created () {
    // this.level = this.leftInfo.user_level + '级'
    // this.title[6] = this.level
        this.titleChange()
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    methods: {
        subSwitch (index) {
            this.subIndex = index
            // 关闭弹窗
            this.$router.push(this.$route.matched[1].path)
        },
        titleChange () {
            const level = this.leftInfo.user_level
            if (level === 21 || level === 12) {
                this.title = ['状态', '阶段', `${level}级`, '结果', '过程', '管理', '人事', '资金', '成就', '积分']
            } else {
                this.title = ['状态', '阶段', `${level}级`, '结果', '过程', '管理', '人事', '资金', '成就', '积分']
            }
        }
    // titleChange () {
    //     const level = this.leftInfo.user_level
    //     if (level === 21 || level === 12) {
    //         this.title = ['状态', '阶', `${level}级`, '结果', '过程', '管理', '资金', '人事', '积分', '成就']
    //     } else {
    //         this.title = ['状态', '阶', `${level}级`, '结果', '过程', '管理', '资金', '人事', '积分', '成就']
    //     }
    // }
    },
    watch: {
        leftInfo () {
            this.titleChange()
        }
    }
}
</script>
<style scoped>
/* .uiTab9 li {
  font-size: 12px;
  min-width: 35px;
  padding: 0px 3px;
  height: 27px;
  line-height: 21px;
  cursor: pointer;
  float: left;
  margin-top: 5px;
  text-align: center;
  margin-right: 10px;
} */
.cGreen {
  color: #3c6 !important;
  font-weight: 800;
}
.uiTab9 .uiTab9-active {
  border: 1px solid #6ac2f7;
  border-bottom: 2px solid #fff;
  border-top: 4px solid #09f;
  height: 32px;
  line-height: 30px;
  margin-top: 0;
  background-color: #fff;
  color: #666;
}
.uiTab9 li {
  font-size: 12px;
  min-width: 20px;
  padding: 0 4px;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  float: left;
  margin-top: 5px;
  text-align: center;
  margin-right: 10px;
}

</style>
